<template>
	<view class="container">
		<view class="group-box">
			<view class="form-uni-list">
				<uni-forms :value="form" :rules="rules" :label-width="80" ref="form">
					<uni-forms-item label="用 户 名" class="list-box">
						<text class="text">{{model.userName}}</text>
					</uni-forms-item>
					<uni-forms-item label="账户余额" class="list-box">
						<text class="text">￥{{model.amount}} 元</text>
					</uni-forms-item>
					<uni-forms-item label="充值金额" name="amount" class="list-box">
						<uni-easyinput type="text" v-model="form.amount" placeholder="请输入充值金额(元)" />
					</uni-forms-item>
					<uni-forms-item label="支付方式" name="paymentId" class="list-box">
						<uni-data-checkbox mode="list" v-model="form.paymentId" :localdata="paymentList"></uni-data-checkbox>
					</uni-forms-item>
					<view class="form-foot">
						<button @click="submitForm" class="btn submit">确认提交</button>
					</view>
				</uni-forms>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model:{},//账户资料
				paymentList: [] ,//支付列表
				//表单
				form:{
					paymentId: null,
					amount: null
				},
				//验证规则
				rules: {
					amount: {
						rules: [
							{required: true, errorMessage: '请输入充值金额'},
							{format: 'number', errorMessage: '充值金额必须是整数'},
							{minimum: 1, errorMessage: '充值金额必须大于零'},
						]
					},
					paymentId: {
						rules: [
							{required: true, errorMessage: '请选择支付方式',}
						]
					}
				},
			}
		},
		methods: {
			//初始化数据
			async initData(){
				let _this = this;
				//正在加载
				uni.showLoading({
				    title: '加载中'
				});
				//获取会员信息
				await _this.$api.request({
					url: "/account/member",
				}).then((res) => {
					_this.model = res.data;
				});
				//根据环境加载支付列表
				let sendUrl=`/client/payment/view/10`;
				
				//#ifdef APP-PLUS
				sendUrl+=`?types=app`;
				//#endif
				
				//#ifdef H5
				//判断是否在微信浏览器里打开
				let ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					sendUrl+=`?types=jsapi`;
				}else{
					sendUrl+=`?types=h5`;
				}
				//#endif
				
				//#ifdef MP
				sendUrl+=`?types=mp`;
				//#endif
				await _this.$api.request({
					url: sendUrl,
				}).then(res=>{
					let _this = this;
					let list = res.data;
					list.forEach(item=>{
						_this.paymentList.push({
							value: item.id,
							text: item.title
						})
					})
				});
				//关闭加载
				uni.hideLoading();
			},
			//提交表单
			submitForm() {
				let _this = this;
				_this.$refs.form.validate().then(async res=>{
					await _this.$api.request({
						url: `/account/member/recharge`,
						method: "post",
						data: _this.form,
						load: true
					}).then(res=>{
						uni.navigateTo({
							url: `../../payment/confirm?no=${res.data.tradeNo}`
						});
					});
				});
			}
		},
		//页面初始化
		onLoad(options){
			this.initData();
		},
	}
</script>

<style>

</style>